import React from 'react';
import {
  Platform,
  Text,
  Image,
  FlatList,
  TouchableOpacity,
  View
} from 'react-native';
import { BaseView,BaseComponent,NavBar,TableList,PlaceHolderView } from '../wedgets';
import Icon from 'react-native-vector-icons/Ionicons';
import PropTypes from 'prop-types';
import styles from './css/Follow';
import Fetch from '../lib/FetchUtil/Fetch';

export default class Follow extends BaseComponent {
  constructor(props) {
    super(props);
    this.renderRow = this.renderRow.bind(this);
    this.fetchData = this.fetchData.bind(this);
  }
  static navigationOptions = ({ navigation }) => ({
    title:'万维易源接口'
  })

  fetchData = async(page, startFetch, abortFetch) => {
    let responseData = [{"name":"鬼故事"},{"name":"心理测试"}];
    startFetch(responseData)
  }

  renderRow ({item, index}){
    return<TouchableOpacity
    onPress={()=>{
      this.goToComponent('GhostStoriesPage');
    }}
     style={{height:44,borderBottomColor:'#F2F2F2',borderBottomWidth:PX_LINE,justifyContent:'center'}}>
      <View style={{flex:1,alignItems:'center',flexDirection:'row',paddingHorizontal:12}}>
        <Text style={{fontSize:14,color:'#000'}}>{index+1}. {item.name}</Text>
      </View>
    </TouchableOpacity>
  }

  render() {
    // const { navigation } = this.props;
    // navigation.setParams({
    //   visiable:false
    // });
    return (
        <View style={styles.container}>
        <TableList 
          ref={list => this.list = list}
          style={{ backgroundColor: 'white' }}
          onFetch={this.fetchData}
          renderItem={this.renderRow}
          keyExtractor={item => item.name}
          pagination={false}
        />
        </View>

    );
  }
}

// class RowItem extends BaseComponent {
//   static propsTypes = {
//       rowData: PropTypes.any,
//       index: PropTypes.number
//   }
//   goToCoinDetail=()=>{
//       this.props.navigation&&this.goToComponent('RiskDetail',{title:'比特币'});
//   }
//   render(){
//       return(
//           <TouchableOpacity style={styles.cellStyle} onPress={this.goToCoinDetail.bind(this)}>
//               <Image style={styles.cellPhoto}/>
//               <Text style={styles.coinName}>  1ST/USDT</Text>
//               <Text style={styles.relateTopic}>相关话题 8</Text>
//               <Text style={styles.relateTopic}>相关情报 22</Text>
//               <Text style={styles.follow}>√关注</Text>
//           </TouchableOpacity>
//       )
//   }
// }

